<template>
    <div class="shopcar_container">
       <div class="goods-list">
            <div class="mui-card" v-for="(item,index) in newInfo" :key="index">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <mt-switch v-model="$store.getters.shopSelected[item.id]"
                        @change="selectedChenged(item.id,$store.getters.shopSelected[item.id])"></mt-switch>
                        <img :src="item.thumb_path" alt="">
                        <div class="info">
                            <h1> {{ item.title }} </h1>
                            <p class="price_info">
                                <span class="price"> {{item.sell_price}} </span>
                                <numbox :newCar="$store.getters.shopInfo[item.id]" :id="item.id"></numbox>
                                <a href="#" @click.prevent="remove(item.id,index)">删除</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
       </div>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                <p>总计(不计运费)</p>  
                <p>已勾选{{$store.getters.getGoodsCountAndMout.count}}个</p>  
                </div>
                <button type="button" class="mui-btn mui-btn-danger">结算总金额{{$store.getters.getGoodsCountAndMout.meny}}</button>
            </div>
        </div>
    </div>
</template>

<script>
import numbox from "../muichajian/shopcarnumbox.vue"
export default {
    data(){
        return{
            newInfo: [],

        }
    },
    created(){
        this.getShuZ()
    },
    methods:{
       getShuZ(){
            var pliD=[]
            var newID=this.$store.state.car
            newID.forEach(item=>{
                pliD.push(item.id)
            })
            this.axios.get("/api/goods/getshopcarlist/"+pliD.join(",")).then(res=>{
                console.log(res.data.message);
                this.newInfo=res.data.message
            })
       },
       remove(id,index){
           this.newInfo.splice(index,1)
           this.$store.commit("removeShopCar",id)
       },
       selectedChenged(id,booler){
           console.log(id);
           console.log(booler);
           this.$store.commit("updatedGoodsSelected",{id,selected:booler})
       }
    },
    components:{
        numbox
    },
}
</script>

<style lang="less" scoped>
    .shopcar_container {
        background-color: #eee;
        overflow: hidden;
        .goods-list {
            .mui-card-content-inner {
                display: flex;
                align-items: center;
                img {
                        width: 60px;
                        height: 60px;
                }
                .info { 
                    h1 {
                    font-size: 13px;
                    }
                    .price_info {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 15px;
                        .price {
                            color: red;
                        }
                        .mui-numbox {
                            height: 25px;
                        }
                    }
                }     
            }
        }
    }
</style>
